<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:37
-->
<template>
  <div class="details">
    <!-- 标题 -->
    <h2>{{ data.name }}</h2>
    <!-- 项目详情 -->
    <div class="time">
      {{ data.beginTime | fmtDate }} ~ {{ data.endTime | fmtDate }} | {{
        data.region
      }}
    </div>
    <div class="wrapper" v-html="data.details"></div>
    <!-- 按钮 -->
    <div class="btn">
    <el-button class="button" type="primary" plain @click="toApply(data.id)">报名</el-button>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      id: "",
      data: {},
    };
  },
  methods: {
    //查询项目的详细信息
    findProjectDetails() {
      get("/index/project/findById?id=" + this.id).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.data = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    //跳转报名页面
    toApply(id){
      this.$router.push({path:'/apply',query:{id:id}})
    }
  },
  created() {
    //拿到从上一个页面传过来的id值
    this.id = this.$route.query.id;
    //调用查询详细信息的方法
    this.findProjectDetails();
  },
};
</script>

<style lang="scss" scoped>
.details {
  h2,
  .time {
    text-align: center;
  }
  .wrapper{
    width: 60%;
  }
  .btn{
    text-align: center;
  }
}
</style>